<template>
  <div class="app-container">
    <el-page-header @back="$router.back()"/>
    <br>
    <el-form ref="form" :model="form" label-width="200px">
      <el-form-item>
        <span style="margin-right: 10px;">
          <el-tag v-if="form['status']==='0'" type="warning">未审核</el-tag>
          <el-tag v-if="form['status']==='1'" type="success">已审核</el-tag>
          <el-tag v-if="form['status']==='2'" type="danger">已下架</el-tag>
        </span>
        <template v-if="form['status']==='0'">
          <el-popconfirm title="确定通过审核吗？" @confirm="checkApproved(id)">
            <el-button slot="reference" size="small" type="warning">通过审核</el-button>
            <el-button slot="reference" style="margin-left: 10px;" size="small" type="danger">下架</el-button>
          </el-popconfirm>
        </template>
        <template v-if="form['status']==='1'">
          <el-button v-if="isEdit" size="small" type="primary" @click="modifyHouse">保存</el-button>
          <el-button v-if="isEdit" size="small" type="" @click="isEdit=false">取消修改</el-button>
          <el-button v-if="!isEdit" size="small" type="primary" @click="isEdit=true">修改</el-button>
          <el-popconfirm title="确定下架吗？" @confirm="offShelf">
            <el-button slot="reference" style="margin-left: 10px;" size="small" type="danger">下架</el-button>
          </el-popconfirm>
        </template>
      </el-form-item>
      <!--      <el-form-item label="房源类型" prop="type">-->
      <!--        <span v-if="!isEdit">{{ form['type'] }}</span>-->
      <!--        <el-input v-else v-model="form['type']" style="width: 200px;" />-->
      <!--      </el-form-item>-->
      <el-form-item label="出租方式" prop="type">
        <span v-if="!isEdit">{{ form.type }}</span>
        <el-input v-else v-model="form.type" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="重庆市区名" prop="city">
        <span v-if="!isEdit">{{ form.city }}</span>
        <el-input v-else v-model="form.city" style="width: 200px;"/>
      </el-form-item>

      <el-form-item label="小区名" prop="address">
        <span v-if="!isEdit">{{ form.address }}</span>
        <el-input v-else v-model="form.address" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="详细地址" prop="detailAddress">
        <span v-if="!isEdit">{{ form['detailAddress'] }}</span>
        <el-input v-else v-model="form['detailAddress']" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="房屋面积" prop="area">
        <span v-if="!isEdit">{{ form['area'] }}</span>
        <el-input v-else v-model="form['area']" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="户型" prop="shape">
        <span v-if="!isEdit">{{ form['shape'] }}</span>
        <el-input v-else v-model="form['shape']" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="月租金" prop="price" :sortable="true">
        <span v-if="!isEdit">{{ form['price'] }}</span>
        <el-input v-else v-model="form['price']" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="联系电话" prop="phoneNumber">
        <span v-if="!isEdit">{{ form['phoneNumber'] }}</span>
        <el-input v-else v-model="form['phoneNumber']" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="租房周期（单位/月）" prop="rentingTime">
        <span v-if="!isEdit">{{ form['rentingTime'] }}</span>
        <el-input v-else v-model="form['rentingTime']" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="房源描述" prop="description">
        <span v-if="!isEdit">{{ form['description'] }}</span>
        <el-input v-else v-model="form['description']" type="textarea" :rows="3" style="width: 400px;"/>
      </el-form-item>
      <el-form-item label="房屋内置" prop="11">
        <el-checkbox-group v-model="form['things']" style="width: 400px;">
          <el-checkbox v-for="things in thingsList" :key="things" :label="things"/>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="房源优势" prop="advantages">
        <el-checkbox-group v-model="form['advantages']" style="width: 400px;">
          <el-checkbox v-for="advantage in advantages" :key="advantage" :label="advantage"/>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="房源图片" prop="photo">
        <el-image v-if="!isEdit" :src="form['photo'][0]"/>
        <QiniuUpload v-if="isEdit" :image-url.sync="form['photo'][0]" @success="uploadSuccess"/>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { checkApproved, getByHouseId, modifyHouse, offShelf } from '@/api/house'
import QiniuUpload from '@/components/qiniuUpload'

export default {
  components: { QiniuUpload },
  data() {
    return {
      id: this.$route.params.id,
      form: {
        advantages: [],
        things: [],
        photo: ['']
      },
      thingsList: ['冰箱', '洗衣机', '油烟机', '空调', '宽带', '热水器', '燃气灶', '衣柜', '沙发', '卫生间', '可做饭', '暖气', '电视', '智能锁', '实木床', '阳台'],
      advantages: ['靠近地铁', '靠近商圈', '可养宠物', '精品装修', '交通便利', '家电齐全', '独立阳台', '采光充足', '窗户齐全'
      ],
      isEdit: false
    }
  },
  computed: {},
  created() {
    this.id = this.$route.params.id
    this.getByHouseId()
  },
  methods: {
    async uploadSuccess(imageUrl) {
      this.form.photo = [imageUrl]
      console.log(this.form.photo)
    },
    async modifyHouse() {
      const res = await modifyHouse(this.form)
      console.log(res)
      this.$message.success(res.message)
      this.isEdit = false
      this.getByHouseId()
    },
    async offShelf() {
      const res = await offShelf({ houseId: this.id })
      console.log(res)
      this.$message.success(res.message)
      this.getByHouseId()
    },
    async checkApproved() {
      const res = await checkApproved({ houseId: this.id })
      console.log(res)
      this.$message.success(res.message)
      this.getByHouseId()
    },
    async getByHouseId() {
      const res = await getByHouseId({ id: this.id })
      console.log(res)
      this.form = res.data
      this.thingsList = Array.from(new Set(this.thingsList.concat(res.data.things)))
      this.advantages = Array.from(new Set(this.advantages.concat(res.data.advantages)))
    }
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

</style>

